<template>
  <div :class="['message', message.role]">
    <!-- 仅当角色不是system时显示头像 -->
    <div class="avatar"
         v-if="message.role !== 'system'"
         :style="message.role === 'assistant' ? 'order: 0;' : 'order: 2;'">
      <a-avatar :src="message.role === 'assistant' ? aiAvatar : userAvatar" />
    </div>

    <div class="content"
         :class="message.role"
         :style="message.role === 'assistant' ? 'order: 1;' : 'order: 1;'">
      <div class="bubble" :class="message.role" v-if="message.role !== 'system'">
        <v-md-preview :text="message.content" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import aiAvatar from '@/assets/ai-avatar.png'
import userAvatar from '@/assets/user-avatar.png'

const props = defineProps({
  message: {
    type: Object,
    required: true
  }
})

// const aiAvatar = ref('https://joeschmoe.io/api/v1/ai')
// const userAvatar = ref('https://joeschmoe.io/api/v1/user')
</script>

<style scoped>
.message {
  display: flex;
  margin-bottom: 16px;
  flex-direction: row;
}

.message.assistant {
  justify-content: flex-start;
}

.message.user {
  justify-content: flex-end;
}

.message.system {
  justify-content: center; /* 系统消息居中显示 */
}

.avatar {
  margin: 0 12px;
  max-width: 60px;
}

.content {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

.content.system {
  max-width: 80%; /* 系统消息适当放宽宽度限制 */
  align-items: center; /* 内容居中对齐 */
}

.message-container {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-start;
}

/* 头像样式 */
.avatar {
  flex-shrink: 0;
  margin: 2px 8px 0 0; /* 减少头像边距 */
}

/* 气泡基础样式 */
.bubble {
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.5;
  max-width: 85%;
  word-break: break-word;
  position: relative;
}
.bubble >>> .github-markdown-body {
  padding: 6px 32px 0px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.0;
  word-wrap: break-word;
}

/* 用户消息气泡 - 右对齐 */
.bubble.user {
  background-color: #1890ff;
  color: #fff;
  margin-left: auto;
  border-top-right-radius: 4px;
  min-width: fit-content; /* 关键属性 */
}

/* AI消息气泡 - 左对齐 */
.bubble.assistant {
  background-color: #f5f5f5;
  color: #333;
  margin-right: auto;
  border-top-left-radius: 4px;
}

/* 优化Markdown渲染样式 */
.bubble >>> .v-md-editor-preview {
  padding: 0;
  white-space: pre-wrap;
}

.bubble >>> p {
  margin: 0.3em 0;
  white-space: pre-wrap;
}
</style>
